<template>
  <GlobalPage>
    <div class="table-box">
      <el-table
        :data="Data.list"
        row-key="meta.id"
        style="font-size: 10px"
        :indent="16"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        >
        <el-table-column type="selection" width="35" align="center" />
        <el-table-column prop="id" label="ID" width="45" align="center">
        </el-table-column>
        <el-table-column label="标题" width="140">
          <template #default="{ row }">
            <span>{{ row.meta.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="80" align="center">
        </el-table-column>
        <el-table-column
          prop="components"
          label="组件文件路径"
          align="center"
          width="190"
        >
          <template #default="{ row }">
            <span>
              {{ row.meta.component }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="图标" width="60" align="center">
          <template #default="{ row }">
            <i
              class="overall-icon"
              style="font-size: 18px"
              :class="row.meta.icon.normal"
            ></i>
          </template>
        </el-table-column>
        <el-table-column label="激活图标" width="60" align="center">
          <template #default="{ row }">
            <i
              class="overall-icon"
              style="font-size: 18px"
              :class="row.meta.icon.active"
            ></i>
          </template>
        </el-table-column>
        <el-table-column label="name" prop="name" width="200">
        </el-table-column>
        <el-table-column label="访问路由" prop="path" width="280">
        </el-table-column>
        <el-table-column label="重定向" prop="state" align="center" width="60">
          <template #default="{ row }">
            <template v-if="row.meta.redirect.redirect_state">
              <el-tag size="small" effect="dark">开启</el-tag>
            </template>
            <template v-else> - </template>
          </template>
        </el-table-column>

        <el-table-column
          label="重定向方式"
          prop="state"
          align="center"
          width="190"
        >
          <template #default="{ row }">
            {{ row.meta.redirect.redirect_state }}
          </template>
        </el-table-column>

        <el-table-column
          label="重定向地址"
          prop="state"
          align="center"
          width="200"
        >
          <template #default="{ row }">
            {{
              row.meta.redirect.redirect_state
                ? row.meta.redirect.redirect_url
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column label="菜单栏" align="center" width="50">
          <template #default="{ row }">
            <el-switch :value="row.meta.display.navigator_show"> </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="面包屑" align="center" width="50">
          <template #default="{ row }">
            <el-switch :value="row.meta.display.breadcrumbs_show"> </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="展开" align="center" width="50">
          <template #default="{ row }">
            <el-switch :value="row.meta.display.childrenDevelop"> </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="箭头" align="center" width="50">
          <template #default="{ row }">
            <el-switch :value="row.meta.display.right_arrow"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="state"
          align="center"
          width="180"
        >
          <template #default="{ row }">
            <el-tag type="danger" size="small" effect="dark">{{
              row.meta.state
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" fixed="right" prop="state" align="center">
          <template #default="{ row }">
            <el-tag type="danger" size="small" effect="dark">{{
              row.meta.state
            }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="50" align="center">
          <template #default="{ row, $index: index }">
            <el-dropdown>
              <el-button :icon="MoreFilled" circle />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="clickLook(row)"
                    >查看</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </GlobalPage>
</template>

<script setup>
import GlobalPage from "@/components/Global-Page/Global-Page.vue";
import { MoreFilled, View, Edit } from "@element-plus/icons-vue";
import { reactive, onBeforeMount } from "vue";
import api from "@/api";
const Data = reactive({
  list: [],
  page: null,
});
onBeforeMount(async () => {
  api.Manage.MenuList()
    .then((res) => {
      console.log(res);
      let { data } = res;
      let { list } = data;
      Data.list = list;
    })
    .catch((err) => {
      console.log(err);
    });
});
</script>

<style>
.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 14px;
}

.menu-header {
  height: 46px;
  background: white;
}

.heade-option {
}

.table-menu {
  height: 65px;
  box-shadow: 0px 0px 3px #c3c3c324;
  display: flex;
  align-items: center;
  padding: 0px 15px;
}
</style>
